<template>
  <div>
    <el-select v-model="input1.value" filterable allow-create default-first-option placeholder="请选择文章标签">
      <el-option v-for="item in input1.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
    </el-select>
    <el-button type="primry" @click="getVal">获取值</el-button>
    <el-select
      style="width: 300px"
      filterable
      allow-create
      clearable
      default-first-option
      v-model="input2.value"
      placeholder="请输入自定义变量值/选择内置变量"
    >
      <el-option-group v-for="group in input2.options" :key="group.label" :label="group.label">
        <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
      </el-option-group>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input1: {
        options: [
          {
            value: "HTML",
            label: "HTML",
          },
          {
            value: "CSS",
            label: "CSS",
          },
          {
            value: "JavaScript",
            label: "JavaScript",
          },
        ],
        value: "",
      },
      input2: {
        options: [
          {
            label: "内置变量",
            options: [
              {
                value: "__RECEIVER__",
                label: "接收人",
              },
              {
                value: "__DATETIME__",
                label: "当前时间",
              },
              {
                value: "__DATE__",
                label: "当前日期",
              },
            ],
          },
        ],
        value: "",
      },
    };
  },
  methods: {
    getVal() {
      console.log(this.input2.value);
    },
  },
};
</script>
